<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :doactions="doactions" :checkbox-item="false">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs :tabs="tabs" />
        <page-header content="课时学习记录" />
      </template>
    </page-list>
    <face-view v-if="faceVisible" :user-id="userId" :scene-key="sceneKey" :scene-id="sceneId" @close="faceVisible = false" />
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import PageHeader from '@/components/page-header';
import Tabs from './tabs'
import FaceView from '@/pages/user/student/face/FaceView';
import Finished from './components/finished';
export default {
  components: {
    PageList,
    PageHeader,
    Tabs,
    FaceView
  },
  inject: ['reload'],
  data() {
    const userId = this.$route.params.user_id;
    return {
      uri: '/course/admin/video/' + this.$route.params.id + '/student/' + userId + '/info',
      tabs: [
        {
          title: '点播-学员',
          uri: '/course/video/' + this.$route.params.id + '/student',
          meta: {
            permission: 'course.video.default.student'
          }
        },
        {
          title: '点播-学员-课程学习详情',
          uri: '/course/video/' + this.$route.params.id + '/student/' + userId + '/info',
          meta: {
            permission: 'course.video.default.student'
          }
        }
      ],
      custom: {
        finished: Finished
      },
      visible: false,
      importVisible: false,
      faceVisible: false,
      sceneKey: 'course_section',
      sceneId: 0,
      doactions: [
        {
          title: '设置已完成',
          callback: this.finish,
          display: ({ row }) => {
            return !row.finished;
          }
        },
        {
          title: '人脸数据',
          // meta: { permission: 'course.video.student' },
          callback: this.face
        }
      ]
    };
  },
  computed: {
    userId() {
      return this.$route.params.user_id;
    }
  },
  methods: {
    face({ row }) {
      this.sceneId = row.section_id
      this.faceVisible = true;
    },
    finish({ row }) {
      this.$box
        .confirm('确认要设置已完成吗')
        .then(() => {
          this.$http.put(
            '/course/admin/record/finish',
            {
              id: row.id,
              sec: row.section_id,
              user: this.userId
            },
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    }
  }
};
</script>
